ES6精解：箭头函数

基本用法

在ES6中允许使用 => 来定义函数，如下：

 var f = a => a;
    console.log(f(1)); //1

就等同于

 var f = function(a){
         return a;
    }
    console.log(f(1)); //1

从上面可以看出，在箭头左侧的是代表参数，若参数只有一个，()可以省略，箭头右侧的表示函数代码块，若代码块里面是个返回值，则{}可以省略不写

1.无参数情况

若箭头函数不需要参数，则左侧用()代替，如下：

  var f = () => {
      console.log("无参数情况");
   }
    f();//无参数情况

2.有参数情况

  var f = (a, b) => {
        return a+b;
   }
    console.log(f(1,2)); //3

 var f = a => a;
 console.log(f(1)); //1

如果箭头函数有参数，则需要用()括起来，若只有一个参数，括号可以省略不写

在这里要注意一个情况，就是当箭头函数直接返回一个对象的时候，如下：

    var f = () => {name:'liming', age:22}; //报错
    console.log(f());

这样写肯定是报错的，因为{}执行时变成代码块，会去运行代码，所以要用一个()括起来才可以，如下:

var f = () => ({name:'liming', age:22}); 
console.log(f());

执行结果为：

{name: "liming", age: 22}

以上这个写法才是正确的

箭头函数注意点

1.this指向

 var a = '全局变量a';
    var obj={
        a:'局部变量a',
        fn1:function(){
            console.log(this.a);
        },
        fn2:()=>{
            console.log(this.a);
        }
    }
    obj.fn1();
    obj.fn2();

输出结果为：

局部变量a
全局变量a

普通函数的this我们知道是指向最近的一个对象，而箭头函数的this实际上是指向定义时的this，比如把上面代码改为：

 var obj={
        a:'局部变量a',
        fn1:function(){
            console.log(this.a);
        },
        fn2:()=>{
            console.log(this.a);
        }
    }
    obj.fn1();
    obj.fn2();

输出结果为：

局部变量a
undefined

此时因为箭头函数是指向全局的，全局没有变量a则输出undefined,这里的fn1和fn2都是全局函数，所以箭头函数this指向的是定义时的全局，而普通函数的this指向的是最近的一个对象

上面如果那个例子不太明白，可以再看下如下例子：

    this.a = '全局a';
    function Timer() {
         this.a = 'timer中的a';
        // 普通函数
        setTimeout(function () {
            console.log('普通函数:', this.a);
        });

        // 箭头函数
        setTimeout(() => {
            console.log('箭头函数:',this.a);
    });
    }
   new Timer();

输出结果为：

普通函数: 全局a
箭头函数: timer中的a

这里普通函数会指向全局是因为，距离普通函数最近的对象是setTimeOut,而setTimeOut是挂在全局作用域中，所以普通函数指向全局，箭头函数指向的是定义时的对象，箭头函数是在Timer中定义的，所以箭头函数指向Timer

如果把以上代码改为如下：

 this.a = '全局a';
    function Timer() {
         this.a = 'timer中的a';
        // 普通函数
        setTimeout(function () {
            console.log('普通函数:', this.a);
        });

        // 箭头函数
        setTimeout(() => {
            console.log('箭头函数:',this.a);
    });
    }
   Timer();

输出结果：

普通函数: timer中的a
箭头函数: timer中的a

这个是为什么呢，因为如果是new Timer相当于是构造函数，构造了一个对象，如果是Timer()就相当于是调用函数Timer()这两者还是有区别的，如果是调用函数Timer()，这个时候this的指向都是全局，在局部修改this.a会覆盖全局的this.a

通过以上，我们可以知道普通函数跟箭头函数this指向的区别是：

普通函数： this指向最靠近的一个对象

箭头函数： this指向定义时的对象，也就是说箭头函数一旦定义完成，它的指向是固定的，没法改变，它的指向是定义时所在的作用域，而不是执行时的作用域

2.不可以当做构造函数

箭头函数不可以当做构造函数，也就是不可以new一个，否则会报错，如下：

    var fn = ()=>{
        console.log("123");
    }
    new fn(); //Uncaught TypeError: fn is not a constructor

以上会报错，因为箭头函数本身没有属于自己的this，所以箭头函数不可以当做构造函数，也因为箭头函数没有自己的this，所以call()、apply()、bind()这些方法去改变this的指向对箭头函数也是无效的，如下：

  this.x = 'outer';
    (function() {
        console.log([
            (() => this.x).bind({ x: 'inner' })()
        ]);
    })();

输出结果为：

["outer"]

把箭头函数通过bind绑定可见无效，箭头函数还是指向全局

以上是个人总结，有什么不足之处欢迎留言探讨！